<template>
  <div id="fmk">
     <div class="scrollTop" v-show="showTop" @click="toTop">
    <img src="../../assets/huidaodingbu.svg" width="40px" height="40px"/>
 
  </div>
    <el-container>
      <el-header>
        <Top1 />
      </el-header>

      <el-main>
        <div class="content-area">
          <div class="box">
            <div class="jieShao">
              <div class="jieShao1">冠心病</div>
              <div class="jieShao2">
              冠状动脉粥样硬化性心脏病是冠状动脉血管发生动脉粥样硬化病变而引起血管腔狭窄或阻塞，
              造成心肌缺血、缺氧或坏死而导致的心脏病，常常被称为“冠心病”。但是冠心病的范围可能更广泛，
              还包括炎症、栓塞等导致管腔狭窄或闭塞。世界卫生组织将冠心病分为5大类：无症状心肌缺血（隐匿性冠心病）、
              心绞痛、心肌梗死、缺血性心力衰竭（缺血性心脏病）和猝死5种临床类型。
              临床中常常分为稳定性冠心病和急性冠状动脉综合征。
              </div>
            </div>
            <div class="bj" :style="bj"></div>
          </div>
          <div class="titleHead">
            <div class="title1">医生/专家</div>
            <div class="title2">擅长疾病</div>
            <div class="title3">出诊时间</div>
          </div>

          <div v-for="doctor in doctors" :key="doctor.ddid">
            <div v-if="doctor.bbid==1">
              <div class="content">
                <div class="doctPict" :style="doctPict"></div>
                <div class="doctInfo">
                  <el-row>
                    <el-col :span="5">
                      <div class="grid-content bg-purple name-area">{{doctor.ddname}}</div>
                    </el-col>
                    <el-col :span="19">
                      <div class="grid-content bg-purple-light">（{{doctor.dtitle}}）</div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <div class="grid-content bg-purple-light">{{doctor.dkname}}/{{doctor.zkname}}</div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <div class="grid-content bg-purple-light">擅长：{{doctor.bbname}}</div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <div class="but1">{{doctor.bbname}}（{{doctor.fbgoodnum}}）</div>
                    <div class="but1">心脏病（88）</div>
                  </el-row>
                </div>
                <div v-for="tableData1 in tableDataam" :key="tableData1.paid">
                  <div class="doctTime" v-if="tableData1.ddid==doctor.ddid">
                    <div v-for="tableData2 in tableDatapm" :key="tableData2.paid">
                      <div v-if="tableData2.ddid==doctor.ddid">
                        <table border="1" cellspacing="0" cellpadding="0" class="table-area">
                          <tbody>
                            <tr>
                              <th>日期</th>
                              <th>周一</th>
                              <th>周二</th>
                              <th>周三</th>
                              <th>周四</th>
                              <th>周五</th>
                              <th>周六</th>
                              <th>周日</th>
                            </tr>
                            <tr>
                              <td>上午</td>
                              <td>{{tableData1.pamonam}}</td>
                              <td>{{tableData1.patueam}}</td>
                              <td>{{tableData1.pawedam}}</td>
                              <td>{{tableData1.pathuam}}</td>
                              <td>{{tableData1.pafriam}}</td>
                              <td></td>
                              <td></td>
                            </tr>
                            <tr>
                              <td>下午</td>
                              <td>{{tableData2.ppmonpm}}</td>
                              <td>{{tableData2.pptuepm}}</td>
                              <td>{{tableData2.ppwedpm}}</td>
                              <td>{{tableData2.ppthupm}}</td>
                              <td>{{tableData2.ppfripm}}</td>
                              <td></td>
                              <td></td>
                            </tr>
                          </tbody>
                        </table>

                        <div class="but2"  @click="dialogVisible12 = true">电话咨询</div>

<el-dialog
  title="提示"
  :visible.sync="dialogVisible12"
  width="30%"
  :before-close="handleClose12">
  <span>电话咨询 请拨打：</span><img src="../../assets/phone.svg" width="20px," height="20px"><span> 022-87729595  </span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible12 = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible12 = false">确 定</el-button>
  </span>
</el-dialog>
                        <div class="but3" @click="yyform(doctor.ddid)"> 预约挂号</div>
                        <el-dialog
                          title="提示"
                          :visible.sync="dialogVisible"
                          width="30%"
                          :before-close="handleClose"
                        >
                          <el-dialog
                            width="30%"
                            title="预约号已放送至您的手机,请注意查收"
                            :visible.sync="innerVisible"
                            append-to-body
                          ></el-dialog>
                          <div class="yy">
                            <div>
                            
                              <div class="order-wrap yydate">
                                <div class="order-list-choose">
                                  <div class="order-list-option yydate">
                                    选择预约日期
                                     <br>
                                      <br>
                                    <date-picker :date="startTime" :option="option" :limit="limit"></date-picker>
                                  </div>
                                </div>
                              </div >
                              <div class="yytime">
                              
                              选择预约时间
                              <br>
                               <br>
                              <el-time-select
                                v-model="timevalue"
                                :picker-options="{
                                start: '09:00',
                                step: '00:30',
                                end: '17:00'}"
                                placeholder="选择时间"
                              ></el-time-select>
                              </div>
                            </div>
                            <!-- <div class="yy4" @click="innerVisible = true" >立即预约</div> -->
                          </div>
                          <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="addYuYue()">确 定</el-button>
                          </span>
                        </el-dialog>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
         <!-- *******************分页 -->
  <!-- <div class="pagination">
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageConf.pageCode"
                :page-sizes="pageConf.pageOption"
                :page-size="pageConf.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageConf.totalPage">
        </el-pagination>
    </div> -->
        </div>
      </el-main>
      <el-footer>
        <Footer />
      </el-footer>
    </el-container>
  </div>
</template>
<script>
$(function() {
  $("tbody tr:even").css("background-color", "#F5F5F5");
  $("tbody tr:odd").css("background-color", "#E1F5FE");
});
</script>
<script>
import Top1 from "@/components/index/Top1";
import Footer from "@/components/index/footer";
import Datepicker from 'vue-datepicker/vue-datepicker-es6.vue'
export default {
  components: {
    Top1,
    Footer,
    'date-picker': Datepicker
  },
  data() {
    return {
                 scrollTop: 0,
        time: 0,
        dParams: 20,
        scrollState: 0,
       dialogVisible12: false,
           pageConf: {
        //设置一些初始值(会被覆盖)
        pageCode: 0, //当前页
        pageSize: 4, //每页显示的记录数
        totalPage: 12, //总记录数
        pageOption: [4, 10, 20], //分页选项
        handleCurrentChange: function() {
          console.log("页码改变了");
        }
           },
        yymess:{
          did:"",
          utimes:'',
          odates:'',
          uname: window.localStorage.getItem("uname"),
          uidcard: window.localStorage.getItem("uidcard")
        },
         doctorid:"",

         timevalue: '',
            startTime: {
               time: ''
            },
              //  startTime: '',
              
            
            // yuyueDate:startTime.time,
            endtime: {
               time: ''
            },
            option: {
               type: 'day',
               week: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
               month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
               format: 'YYYY-MM-DD',
               placeholder: '选择日期' ,
               
               inputStyle: {
                  'display': 'inline-block',
                  'padding': '6px',
                  'line-height': '22px',
                  'font-size': '16px',
                  'border': '2px solid #fff',
                  'box-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0.2)',
                  'border-radius': '2px',
                  'color': '#5F5F5F'
               },
               color: {
                 header: '#ccc',
                 headerText: '#f00'
               },
               buttons: {
                 ok: 'Ok',
                 cancel: 'Cancel'
               },
               overlayOpacity: 0.5, // 0.5 as default
               dismissible: true // as true as default
          },
          timeoption: {
            type: 'min',
            week: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
            month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
            format: 'YYYY-MM-DD HH:mm'
          },
          multiOption: {
            type: 'multi-day',
            week: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
            month: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
            format:"YYYY-MM-DD HH:mm"
          },
           limit: [{
                    type: 'weekday',
                    available: [1, 2, 3, 4, 5]
                }, {
                    type: 'fromto',
                    from: this.getNowFormatDate(),
                    to: this.getStandardDateAfterWeek()
                }],    
        

      // ******************
      doctors: "",
      pbdates: "",

      value1: "",
      value2: "",
      innerVisible: false,
      value: [],
      dialogVisible: false,
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      formLabelWidth: "120px",
      bj: {
        backgroundImage: "url(" + require("../../assets/hospital.jpg") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%"
      },
      doctPict: {
        backgroundImage: "url(" + require("../../assets/zanwu1.jpg") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%"
      },
      bottom11: {
        backgroundImage: "url(" + require("../../assets/logo.jpg") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%"
      },
      bottom311: {
        backgroundImage: "url(" + require("../../assets/email.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%"
      },
      bottom32: {
        backgroundImage: "url(" + require("../../assets/law.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%"
      }
    };
  },
  mounted: function() {
    this.getAllDoctor();
    this.getPbAmDate();
    this.getPbPmDate();
    //  this.getPbDate();
    // this.findByPage(this.pageConf.pageCode, this.pageConf.pageSize);
    this.getCount();
       window.addEventListener('scroll', this.getScrollTop);
  },
 computed:{
      showTop: function(){
        let value = this.scrollTop>200?true:false;
        return value;
      },
  },
  methods: {
         toTop(e) {
        if(!!this.scrollState){
          return;
        }
        this.scrollState = 1;
        e.preventDefault();
        let distance = document.documentElement.scrollTop || document.body.scrollTop;
        let _this = this;
        this.time = setInterval(function(){ _this.gotoTop(_this.scrollTop-_this.dParams) }, 10);
      },
      gotoTop(distance){
        this.dParams += 20;
        distance = distance>0 ? distance : 0;
        document.documentElement.scrollTop = document.body.scrollTop = window.pageYOffset = distance;
        if(this.scrollTop < 10){
          clearInterval(this.time);
          this.dParams = 20;
          this.scrollState = 0;
        }
      },
      getScrollTop() {
        this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      },
    
            handleClose12(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      findByPage: function(pageCode,pageSize) {
      // console.log("页码" + this.pageConf.pageCode);
      // console.log("页数" + this.pageConf.pageSize);
      this.$http
        .get("http://localhost:8001/doctor/findByPage", {params:{pageCode:pageCode,pageSize:pageSize}})
       
        .then(function(data) {
          //  this.pageConf.totalPage = data.body.totalElements;
          this.doctors = data.body.content;
          // console.log(this.user)
           console.log(data.bodyText)
           
       
        });
    },    //pageSize改变时触发的函数
    handleSizeChange(val) {
      // this.pageConf.pageSize=val
      this.findByPage(this.pageConf.pageCode, val);
      console.log("触发1"+val)
    },
    //当前页改变时触发的函数
    handleCurrentChange(val) {
       console.log("触发2"+val)
      this.findByPage(val-1, this.pageConf.pageSize);
    },

    getCount: function() {
      this.$http  
        .get("http://localhost:8001/doctor/findallcount")
        .then(function(data) {
          console.log(data.bodyText)
         this.pageConf.totalPage = data.body;
        });
        
    },


  
      yyform(doctorid){
      this.dialogVisible = true;
      this.yymess.did= doctorid;
      console.log(doctorid)
      },
      addYuYue(){
        this.dialogVisible = false;
        this.yymess.odates= this.startTime.time;
        this.yymess.otimes=this.timevalue;
        this.$http
        .post("http://localhost:8001/yuyue/addyuyue", this.yymess)
              .then(function(data) {

           console.log(data);
         if(data.bodyText=="success") {
          
              this.$message({
          showClose: true,
          message: '预约成功，预约码已发送你的手机',
          type: 'success'
        });
           
         }else if(data.bodyText=="failed1"){
           console.log(data.bodyText);
          
            this.$message({
          showClose: true,
          message: '当前预约人数已满请选择其他时间',
          type: 'warning'
        });
         }
         else if(data.bodyText=="failed2"){
           console.log(data.bodyText);
          
                  this.$message({
          showClose: true,
          message: '你已预约该时间段',
          type: 'warning'
        });
         }
         else{
            console.log(1111);
            console.log(data.bodyText);
            
              this.$message({
          showClose: true,
          message: '预约失败，请填写时间',
          type: 'error'
        });
         }
                
        });
      },


    handleChange(value) {
      console.log(value);
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    getAllDoctor() {
      this.$http
        .get("http://localhost:8001/doctor/findAlldoctor")
        .then(function(data) {
          this.doctors = data.body;
          console.log("cece"+data.bodyText);
        });
    },
 
    getPbAmDate() {
      this.$http
        .get("http://localhost:8001/pbamdate/findAlltDate")
        .then(function(data) {
          this.tableDataam = data.body;
          console.log(this.tableDataam);
          // console.log("cece" + this.tableData.ddid);
           console.log(this.startTime)
        });
    },

    getPbPmDate() {
      this.$http
        .get("http://localhost:8001/pbpmdate/findAlltDate")
        .then(function(data) {
          this.tableDatapm = data.body;
          console.log(this.tableDatapm);
        });
    },
               getNowFormatDate() {
  var date = new Date();
  var seperator1 = "-";
  var year = date.getFullYear();
  var month = date.getMonth() + 1;
  var strDate = date.getDate();
  if (month >= 1 && month <= 9) {
    month = "0" + month;
  }
  if (strDate >= 0 && strDate <= 9) {
    strDate = "0" + strDate;
  }
  var currentdate = year + seperator1 + month + seperator1 + strDate;
 console.log(this.getStandardDateAfterWeek())
  return currentdate;

        },
        
 getStandardDateAfterWeek(){
    var _date = new Date(); //获取今天日期
        _date.setDate(_date.getDate() + 7);//日期回到七天前
    var year=_date.getFullYear();
    var month=_date.getMonth()+1;
    var day=_date.getDate();
    if (month<10) {
        month='0'+month;
    };
    if (day<10) {
        day='0'+day;
    };

    var dateTemp = year+'-'+month+'-'+day;
    _date.setDate(_date.getDate() + 7);//日期重置
    return dateTemp;
}

  }
};
</script>
<style>
  .scrollTop {
    position: fixed;
    right: 40px;
    bottom: 80px;
    cursor: pointer;
  }
.yydate{
  position:absolute;
  line-height: 20px;
  top: 50px;
  left: 70px;
  color: #000;
}
.yytime{
  position:absolute;
  top: 200px;
  left: 140px;
}

input::-webkit-input-placeholder,   
textarea::-webkit-input-placeholder {   
    color: #BDBDBD;     
    
}
.dateimg{

}
.table-area {
  width: 500px;
  height: 200px;
  margin-left: 60px;
  /* border:1px solid #F00 */
  border-collapse: 0;
}

.content-area {
  margin-left: 90px;
}
.yy {
  height: 300px;
  width: 300px;
  /* background-color: #b71c1c; */
  border: 1px solid #4dd0e1;
  border-radius: 5px;
  margin-left: 80px;
  color: black;
}
:hover.yy {
  border: #b71c1c 1px solid;
}
.yy1 {
  height: 50px;
  /* background-color: green; */
  line-height: 70px;
  font-size: 16px;
}
.yy2 {
  height: 50px;
  /* background-color:gold; */
  line-height: 70px;
  font-size: 18px;
  font-weight: 500;
}
.yy3 {
  height: 50px;
  /* background-color: green; */
  line-height: 70px;
  font-size: 16px;
}
.yy4 {
  height: 50px;
  width: 300px;
  background-color: #4dd0e1;
  line-height: 50px;
  font-size: 16px;
  position:absolute;
  bottom: 100px;
}
:hover.yy4 {
  background-color: #b71c1c;
}
.pageInfo {
  margin-top: 10px;
}
.bottom3m {
  padding-top: 10px;
  width: 240px;
  height: 120px;
  /* background-color: pink; */
  margin-left: 60px;
}
.bottom31 {
  height: 60px;
  width: 250px;
  /* background-color: #00bcd4; */
}
.bottom311 {
  float: left;
  height: 40px;
  width: 40px;
  font-size: 13px;
}
.bottom312 {
  float: left;
  height: 40px;
  width: 200px;
  text-align: left;
  margin-left: 5px;
  /* background-color: orange; */
}
.top {
  /* background-color: #b71c1c; */
  height: 110px;
  border-top: 1px black solid;
  border-bottom: 1px black solid;
}
.top1 {
  /* background-color: aqua; */
  height: 40px;
  font-size: 18px;
  padding-top: 10px;
  padding-left: 10px;
  text-align: left;
  color: #b71c1c;
}
.top2 {
  height: 60px;
  padding-left: 20px;
  text-align: left;
  /* background-color: gold; */
}
.bottom {
  border-bottom: 1px black solid;
  height: 160px;
  /* background-color: #b71c1c; */
}
.bottom1 {
  margin-top: 20px;
  padding-left: 20px;
  float: left;
  height: 120px;
  width: 350px;
  /* background-color: greenyellow; */
}
.bottom11 {
  height: 120px;
  width: 120px;
  float: left;
}
.bottom12 {
  margin-left: 10px;
  padding-top: 30px;
  width: 200px;
  height: 120px;
  float: left;
  font-size: 26px;
  font-weight: 500;
  text-align: left;
}
.bottom2 {
  margin-top: 20px;
  padding-top: 20px;
  float: left;
  height: 120px;
  width: 550px;
  /* background-color: blueviolet; */
  border-left: 1px #9e9e9e solid;
  border-right: 1px #9e9e9e solid;
}
.bottom22 {
  height: 120px;
  width: 300px;
  margin-left: 120px;
  font-size: 15px;
}
.bottom3 {
  margin-top: 20px;
  float: left;
  height: 120px;
  width: 350px;
  /* background-color: green; */
}
.but2 {
  border: #b71c1c 1px solid;
  border-radius: 5px;
  width: 90px;
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  float: left;
  margin-top: 13px;
  margin-right: 100px;
  margin-left: 140px;
  color: #b71c1c;
}
.but3 {
  background-color: #b71c1c;
  border-radius: 5px;
  width: 90px;
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  float: left;
  margin-top: 13px;

  color: white;
}
.but1 {
  border: #b71c1c 1px solid;
  width: 85px;
  font-size: 12px;
  float: left;
  margin-left: 5px;
  color: #b71c1c;
}
.el-row {
  margin-bottom: 5px;
  margin-left: 5px;

  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple {
  text-align: right;
  /* background: #d3dce6; */
}
.bg-purple-light {
  text-align: left;
  line-height: 20px;
  /* background: #e5e9f2; */
  font-size: 10px;
}
.el-header {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 80px;
  font-family: "STXingkai";
  font-size: 30px;
  position: relative;
  right: 150px;
}
.el-main {
  margin-top: 30px;
  border-top: red 3px solid;
}
.el-header-left {
  position: absolute;
  left: 230px;
}
.el-header-img {
  position: absolute;
  left: 170px;
  top: 10px;
}
.search-area {
  width: 580px;
  position: absolute;
  left: 500px;
  font-family: "Microsoft YaHei";
  font-size: 10px;
}

.search-button {
  width: 90px;
  height: 30px;
  font-size: 5px;
}
.search-input {
  /* width: 260px; */
  border: 1px solid #e2e2e2;
  height: 30px;
  background-image: url(../../assets/sousuo.svg);
  background-repeat: no-repeat;
  background-size: 25px;
  background-position: 5px center;
  padding: 0 0 0 40px;
}
.login-area {
  position: absolute;
  right: 30px;
  font-family: "Microsoft YaHei";
  font-size: 18px;
  color: #80d8ff;
}

.hlpe-area {
  position: absolute;
  right: -50px;
  font-family: "Microsoft YaHei";
  font-size: 18px;
  color: #80d8ff;
}
.box {
  height: 300px;
  width: 1050px;
  /* background-color: brown; */
  margin-left: 120px;
}
.bj {
  width: 600px;
  height: 300px;
  /* background-color: pink; */
  float: left;
  /* background-image: url("../../asssets/hospital.jpg") */
}
.jieShao {
  height: 300px;
  width: 450px;
  background-color: #42a5f5;
  color: white;
  float: left;
}
.jieShao1 {
  height: 60px;
  /* width: 400px; */
  /* background-color: aqua; */
  font-size: 24px;
  font-weight: 500;
  line-height: 60px;
  text-align: left;
  padding-left: 30px;
  padding-top: 20px;
}
.jieShao2 {
  height: 239px;
  /* background-color: chocolate; */
  padding-top: 10px;
  margin-left: 20px;
  margin-right: 20px;
}
.titleHead {
  height: 50px;
  width: 1050px;
  background-color: #e0e0e0;
  margin-left: 120px;
  margin-top: 10px;
  font-size: 20px;
}
.title1 {
  margin-top: 15px;
  float: left;
  width: 100px;
  /* background-color: aqua; */
  margin-left: 30px;
}
.title2 {
  margin-left: 160px;
  margin-top: 15px;
  float: left;
  width: 200px;
  /* background-color: #42a5f5; */
}
.title3 {
  margin-left: 250px;
  margin-top: 15px;
  float: left;
  /* background-color: green; */
}
.content {
  position: relative;
  /* padding-top: 5px;
    padding-left: 10px; */
  height: 290px;
  width: 1050px;
  /* background-color:greenyellow; */
  margin-left: 120px;
  margin-top: 10px;
  border-bottom: #333 1px solid;
}
.doctPict {
  position: absolute;
  top: 5px;
  /* left: 10px; */
  height: 250px;
  width: 200px;
  /* background-color: aqua; */
  float: left;
}
.doctInfo {
  position: absolute;
  top: 5px;
  left: 210px;
  height: 200px;
  width: 190px;
  /* background-color: rebeccapurple; */
  float: left;
}
.doctTime {
  position: absolute;
  top: 5px;
  right: 0px;
  height: 300px;
  width: 660px;
  /* background-color: red; */
  float: left;
}
.el-table {
  position: relative;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 100%;
  max-width: 100%;
  font-size: 14px;
  color: #606266;
}
.name-area {
  font-size: 12px;
  font-weight: bold;
}
</style>
